<template>
<div>
    <div class="interact">
      <div class="interactList" v-for="(temp,index) in 10" :key="index"  @click="show = true">
          <!-- <img src="@/assets/1.png" alt=""> -->
      </div>
    </div>

    <div class="layer" v-show="show" @click="show = false" >
       <hFix></hFix>
     </div>
</div>
  
</template>

<style lang="less">
.interact{
    width: 100%;
    display: flex;
    justify-content:flex-start;
    flex-wrap: wrap;
    box-sizing: border-box;
    // padding: 20px 0;
    .interactList{
        // border: 1px solid;
        width: 225px;
        height: 485px;
        overflow: hidden;
        margin: 10px 0;
        background: #DADADA;
        box-shadow:0px 2px 25px 0px rgba(189,189,189,0.3);
        img{
            width: 100%;
        }
    }
    .layer {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 99;
  }
}
</style>

<script>
import hFix from "@/components/hFix"
export default {
  components: {
    hFix
  },
  data() {
    return {
      show: false
    };
  }
};
</script>